<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    div {
      background-color: pink;
    }
    p {
      background-color: yellow;
    }
    .innerDiv {
      background-color: red;
    }
    .fontHigh {
      background-color: red;
      font-size: 3px;
    }
    #div1 {
      height: 200px;
      width: 80%;
    }
    #p1 {
      height: 100px;
    }
    #div2 {
      height: 50px;
    }
    #item1 {
      background-color: red;
      font-size: 3px;
    }
    #item2 {
      background-color: blue;
      height: 35px;
    }
    #item3 {
      background-color: pink;
    }
    ol {
      background-color: yellow;
      height: 100px;
    }
    </style>
  </head>
  <body>
  
    <div>
      <p>
        <div class="innerDiv">
          
        </div>
      </p>
    </div>
    <hr>
    <hr>
    <div>
      <p>
        <div class="innerDiv">
          
        </div>
      </p>
    </div>
    <hr>
    <p>从上面效果看：块级元素内没有内容也有高度？</p>
    <hr>
    <div>
      <p>
        <div class="innerDiv">
        </div>
      </p>
    </div>
    <hr>
    <hr>
    <div>
      <p>
        <div class="innerDiv">
          加了一段文字，为什么两水平线间距离变大了呢 
        </div>
      </p>
    </div>
    <hr>
    <hr>
    <div>
      <p>
        <div class="fontHigh">
          块级元素没设置高度时，高度由内部撑起 
        </div>
      </p>
    </div>
    <hr>
    <hr>
    <div id="div1">
      <p id="p1">
        <div id="div2" class="innerDiv">
          块级元素设置高度后生效，宽度默认为父级100%。p标签内为什么不能放div标签
        </div>
      </p>
    </div>
    <hr>
    <hr>
    <ol>
      <li id="item1">item1:没设置高度时，高度由内部撑起</li>
      <li id="item2">item2:高度也可自行设置</li>
      <li id="item3">item2：前面的留白怎么去除?</li>
    </ol>
  </body> 
</html>
